<template>
  <div class="container">
    <ul class="tab">
      <li class="tab-item"
          v-for="(item, ind) in tab_arr"
          :key="ind"
          @click="toggle_tab(item)">
        <div class="msg"
             :class="{'active':item.type==type}">{{item.msg}}</div>
      </li>
    </ul>
    <div class="content">
      <scroll-view :scroll-y="true"
                   :style="{'height': '100%'}"
                   @scrolltolower="infiniteScroll">
        <ul class="list"
            v-if="!isempty">
          <li class="list-item clearfix"
              @click="watch_detail(item)"
              v-for="(item, inde) in order_list"
              :key="inde">
            <div class="top clearfix">
              <div class="left">订单编号：{{item.order_sn}}</div>
              <div class="right">
                <!-- 待付款 -->
                {{item.order_status==1?'待付款':''}}
                <!-- 待发货 -->
                {{item.order_status==2?'待发货':''}}
                <!-- 交易成功（待评价） -->
                {{item.order_status==3?'待评价':''}}
                <!-- 已取消（交易关闭） -->
                {{item.order_status==4?'交易关闭':''}}
                <!-- 待收货 -->
                {{item.order_status==5?'待收货':''}}
                <!-- 交易成功（已评价） -->
                {{item.order_status==6?'交易成功':''}}
                <!-- 超时交易关闭 -->
                {{item.order_status==7?'交易关闭':''}}
                <!-- 交易正常关闭 -->
                {{item.order_status==8||item.order_status==10?'已退款':''}}
              </div>
            </div>
            <ul class="goods-list"
                v-if="item.shop_order_goods.length == 1">
              <li class="goods-item"
                  v-for="(goods_item, index) in item.shop_order_goods"
                  :key="index">
                <div class="picture">
                  <img :src="imgUrl+goods_item.goods_image"
                       alt
                       class="img" />
                </div>
                <div class="info">
                  <div class="goods-name">
                    <span v-if="goods_item.cross_border == 1"
                          class="icon"></span>
                    {{goods_item.goods_name}}
                  </div>
                  <div class="plus"
                       v-if="goods_item.plus_title&&goods_item.plus_title!=''">
                    {{goods_item.plus_title}}
                  </div>
                  <div class="bottom">
                    <div class="specification clearfix">
                      {{goods_item.goods_item_name}}
                      <div class="num">×{{goods_item.goods_num}}</div>
                    </div>
                    <div class="price">
                      <div class="rmb-group">￥{{goods_item.goods_price}}</div>
                    </div>
                  </div>

                </div>
              </li>
            </ul>
            <ul class="goods-lists"
                v-if="item.shop_order_goods.length >1">
              <li class="goods-item"
                  v-for="(goods_item, index) in item.shop_order_goods"
                  :key="index">
                <div class="pictures">
                  <img :src="imgUrl+goods_item.goods_image"
                       alt
                       class="imgs" />
                </div>
              </li>
              <div class="more"
                   v-if="item.shop_order_goods.length >=4">
                <p class="more_con">更多</p>
              </div>
            </ul>
            <div class="total">
              共{{item.shop_num}}件商品&nbsp;&nbsp;合计：
              <div class="rmb-group">￥{{item.order_price}}</div>
              <div class="tip">(含运费：¥{{item.freight_price}})</div>
            </div>
          </li>
        </ul>
        <div v-if="type!=3">
            <img v-if="isempty"
             src="https://img.ameimeika.com/h5_images/mp_images/mp_2.9/noorder.png"
             mode="widthFix"
             alt
             class="nothing" />
        <p v-if="isempty"
           class="no_title">你还没有相关订单哦~</p>
        </div>
      <div v-else>
          <img v-if="type==3"
             src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nosay.png"
             mode="widthFix"
             alt
             class="nothing" />
        <p v-if="isempty"
           class="no_title">评价都写完了~</p>
      </div>
      </scroll-view>
    </div>
  </div>
</template>


<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      tab_arr: [
        { msg: "待付款", type: 1 },
        { msg: "待发货", type: 2 },
        { msg: "待收货", type: 5 },
        { msg: "待评价", type: 3 },
        { msg: "全部", type: 0 }
      ],
      type: 0,
      page: 1,
      order_list: [],
      pagesize: 10,
      imgUrl: common.image_response,
      isempty: false
    };
  },
  methods: {
    toggle_tab (item) {
      this.type = item.type;
      this.page = 1;
      this.order_list = [];
      this.getlist();
    },
    getlist () {
      common.mmk_Loading(0);
      let that = this;
      common.fly_post(
        "api/v4_2/orders/all",
        {
          page: this.page,
          pageSize: this.pagesize,
          type: this.type,
          user_id: wx.getStorageSync('user_id') || 0
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            if (res.data.length == 0 && that.page == 1) {
              that.isempty = true;
              return false;
            } else if (res.data.length == 0 && that.page > 1) {
              that.isempty = false;
              common.mmk_Loading(2, "没有更多了");
              return false;
            } else if (res.data.length > 0 && that.page == 1) {
              that.isempty = false;
              that.order_list = res.data;
            } else if (res.data.length > 0 && that.page > 1) {
              that.isempty = false;
              that.order_list.push(...res.data);
            }
          }
        }
      );
    },
    infiniteScroll () {
      this.page++;
      this.getlist();
    },
    watch_detail (item) {
      wx.navigateTo({
        url: `/pages/package_mine/order_detail/main?id=${item.id}&order_status=${
          item.order_status
          }`
      });
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "我的订单"
    });
    this.type = options.type - 0;
  },
  onShow () {
    this.getlist();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  .tab {
    width: 100%;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    display: flex;
    background-color: #fff;
    border: 1px solid rgba(243, 243, 243, 1);
    .tab-item {
      flex: 1;
      position: relative;
      .msg {
        display: inline-block;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 35%;
        // transform: translateX(-50%);
      }
      .active {
        &::before {
          color: rgba(246, 70, 101, 1);
          content: "";
          width: 100%;
          height: 2px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(246, 70, 101, 1);
        }
      }
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
    .list {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .list-item {
        width: 100%;
        // padding-bottom: 10px;
        background-color: #fff;
        margin-bottom: 8px;
        .top {
          overflow: hidden;
          width: 100%;
          // height: 50px;
          box-sizing: border-box;
          // line-height: 43px;
          padding: 7px 15px;
          font-size: 12px;
          font-family: "Medium";
          color: rgba(102, 102, 102, 1);
          .left {
            float: left;
            color: #666666;
          }
          .right {
            float: right;
            color: #ff383e;
          }
        }
        .goods-list {
          width: 100%;
          .goods-item {
            // height: 90px;
            margin: 0 15px;
            display: flex;
            position: relative;
            .picture {
              width: 70px;
              height: 70px;
              background: rgba(216, 216, 216, 1);
              border-radius: 2px 0px 0px 2px;
              .img {
                width: 100%;
                max-height: 100%;
                border-radius: 2px;
              }
            }
            .info {
              flex: 1;
              // background: rgba(251, 251, 251, 1);
              border-radius: 0px 2px 2px 0px;
              padding-left: 10px;
              line-height: 20px;
              .goods-name {
                font-size: 14px;
                font-family: "Regular";
                color: rgba(68, 68, 68, 1);
                width: 67%;
                .icon {
                  width: 40px;
                  height: 14px;
                  display: inline-block;
                  background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
                    no-repeat;
                  background-size: 100% 100%;
                }
              }
              .plus {
                padding: 0 5px;
                margin: 4px 0;
                line-height: 16px;
                font-size: 10px;
                font-family: "PingFangSC-Medium", "PingFang SC";
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: inline-block;
              }
              .bottom {
                .specification {
                  font-size: 12px;
                  font-family: "Regular";
                  color: rgba(136, 136, 136, 1);
                  float: right;
                  .num {
                    float: right;
                    font-size: 14px;
                    font-family: "Regular";
                    color: rgba(68, 68, 68, 1);
                  }
                }
                .price {
                  font-size: 14px;
                  font-family: "Medium";
                  color: rgba(246, 70, 101, 1);
                  vertical-align: middle;
                  line-height: 20px;
                  .fen-group,
                  .rmb-group {
                    display: inline-block;
                    .icon {
                      width: 12px;
                      height: 12px;
                      border-radius: 50%;
                      line-height: 12px;
                      font-size: 8px;
                      text-align: center;
                      color: #fff;
                      display: inline-block;
                      vertical-align: middle;
                    }
                  }
                  .and {
                    display: inline-block;
                    font-size: 15px;
                    font-family: "Medium";
                    color: rgba(136, 136, 136, 1);
                    // margin: 0 6px;
                  }
                  .fen-group {
                    color: rgba(255, 113, 0, 1);
                    .icon {
                      background: rgba(255, 113, 0, 1);
                    }
                  }
                  .rmb-group {
                    color: rgba(246, 70, 101, 1);
                    .icon {
                      background: rgba(246, 70, 101, 1);
                    }
                  }
                }
              }
              .specification {
                font-size: 12px;
                font-family: "Regular";
                color: rgba(136, 136, 136, 1);
                .num {
                  float: right;
                  font-size: 14px;
                  font-family: "Regular";
                  color: rgba(68, 68, 68, 1);
                }
              }
              .price {
                font-size: 14px;
                font-family: "Medium";
                color: rgba(246, 70, 101, 1);
                vertical-align: middle;
                line-height: 20px;
                .fen-group,
                .rmb-group {
                  display: inline-block;
                  .icon {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    line-height: 12px;
                    font-size: 8px;
                    text-align: center;
                    color: #fff;
                    display: inline-block;
                    vertical-align: middle;
                  }
                }

                .and {
                  display: inline-block;
                  font-size: 15px;
                  font-family: "Medium";
                  color: rgba(136, 136, 136, 1);
                  // margin: 0 6px;
                }
                .fen-group {
                  color: rgba(255, 113, 0, 1);
                  .icon {
                    background: rgba(255, 113, 0, 1);
                  }
                }
                .rmb-group {
                  color: rgba(246, 70, 101, 1);
                  .icon {
                    background: rgba(246, 70, 101, 1);
                  }
                }
              }
            }
          }
        }
        .goods-lists {
          width: 93%;
          height: 70px;
          margin: 0 auto;
          overflow: hidden;
          .goods-item {
            margin: 0 1px;
            float: left;
            .pictures {
              width: 70px;
              height: 70px;
              background: rgba(216, 216, 216, 1);
              border-radius: 2px 0px 0px 2px;
              .imgs {
                width: 100%;
                max-height: 100%;
                border-radius: 2px;
              }
            }
            .info {
              flex: 1;
              background: rgba(251, 251, 251, 1);
              border-radius: 0px 2px 2px 0px;
              padding-left: 10px;
              line-height: 20px;
              .goods-name {
                font-size: 14px;
                font-family: "Regular";
                color: rgba(68, 68, 68, 1);
                margin-top: 5px;
              }
              .specification {
                margin-top: 5px;
                font-size: 14px;
                font-family: "Regular";
                color: rgba(136, 136, 136, 1);
                .num {
                  float: right;
                  font-size: 14px;
                  font-family: "Regular";
                  color: rgba(68, 68, 68, 1);
                }
              }
              .price {
                margin-top: 15px;
                font-size: 14px;
                font-family: "Medium";
                color: rgba(246, 70, 101, 1);
                vertical-align: middle;
                line-height: 20px;
                .fen-group,
                .rmb-group {
                  display: inline-block;
                  .icon {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    line-height: 12px;
                    font-size: 8px;
                    text-align: center;
                    color: #fff;
                    display: inline-block;
                    vertical-align: middle;
                  }
                }
                .and {
                  display: inline-block;
                  font-size: 15px;
                  font-family: "Medium";
                  color: rgba(136, 136, 136, 1);
                }
                .fen-group {
                  color: rgba(255, 113, 0, 1);
                  .icon {
                    background: rgba(255, 113, 0, 1);
                  }
                }
                .rmb-group {
                  color: rgba(246, 70, 101, 1);
                  .icon {
                    background: rgba(246, 70, 101, 1);
                  }
                }
              }
            }
          }
          .more {
            width: 60px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            .more_con {
              width: 100%;
              text-align: center;
            }
          }
        }
        .all {
          padding-right: 15px;
          font-size: 14px;
          font-family: "Regular";
          color: rgba(102, 102, 102, 1);
          text-align: right;
        }
        .total {
          width: 92%;
          margin: 0 auto;
          text-align: right;
          margin-top: 10px;
          line-height: 20px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          color: rgba(102, 102, 102, 1);
          border-top: solid 1px #dddddd;
          padding: 8px 0;
          .fen-group,
          .rmb-group {
            display: inline-block;
            .icon {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              line-height: 12px;
              font-size: 8px;
              text-align: center;
              color: #fff;
              display: inline-block;
              vertical-align: middle;
            }
          }
          .and {
            display: inline-block;
            font-size: 15px;
            font-family: "Medium";
            color: rgba(136, 136, 136, 1);
          }
          .fen-group {
            color: rgba(255, 113, 0, 1);
            .icon {
              background: rgba(255, 113, 0, 1);
            }
          }
          .rmb-group {
            color: rgba(246, 70, 101, 1);
            .icon {
              background: rgba(246, 70, 101, 1);
            }
          }
          .tip {
            display: inline-block;
            font-size: 10px;
            font-family: "PingFangSC-Regular";
            color: rgba(102, 102, 102, 1);
            margin-left: 4px;
          }
        }
      }
    }
    .nothing {
      width: 105px;
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }
    .no_title {
      position: absolute;
      top: 50%;
      left: 42%;
      text-align: center;
      opacity: 0.7;
    }
  }
}
</style>

